<template>
  <div class="form-box">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="130px"
    >
      <el-form-item label="活动海报" prop="activityPoster">
        <uploadSingImg
          :imgUrl="ruleForm.activityPoster"
          accept=".jpg,.jpeg,.png,.gif"
          :maxSize="5"
          :showDeleteIcon="true"
          @getImgUrl="getImgUrl($event, 'activityPoster')"
        >
          <template v-slot:imgInfo>
            建议尺寸宽750px,上传JPG、PNG、GIF图片格式,图片大小不超过5M
          </template>
        </uploadSingImg>
      </el-form-item>
      <el-form-item label="分享海报" prop="sharePoster">
        <uploadSingImg
          :imgUrl="ruleForm.sharePoster"
          accept=".jpg,.jpeg,.png,.gif"
          :maxSize="5"
          :showDeleteIcon="true"
          @getImgUrl="getImgUrl($event, 'sharePoster')"
        >
          <template v-slot:imgInfo>
            建议尺寸宽750px,上传JPG、PNG、GIF图片格式,图片大小不超过5M
          </template>
        </uploadSingImg>
      </el-form-item>
      <el-form-item label="活动按钮">
        <el-form-item
          label="查看邀请记录按钮"
          prop="activityButton.inviteEarnings"
        >
          <uploadSingImg
            :imgUrl="ruleForm.activityButton.inviteEarnings"
            accept="jpg,.jpeg,.png,.gif"
            :maxSize="5"
            :showDeleteIcon="true"
            @getImgUrl="getButtonImg($event, 'inviteEarnings')"
          >
            <template v-slot:imgInfo>请您上传jpg, png, gif格式图片</template>
          </uploadSingImg>
        </el-form-item>
        <el-form-item
          label="查看收益明细按钮"
          prop="activityButton.returnsDetailed"
        >
          <uploadSingImg
            :imgUrl="ruleForm.activityButton.returnsDetailed"
            accept="jpg,.jpeg,.png,.gif"
            :maxSize="5"
            :showDeleteIcon="true"
            @getImgUrl="getButtonImg($event, 'returnsDetailed')"
          >
            <template v-slot:imgInfo>请您上传jpg, png, gif格式图片</template>
          </uploadSingImg>
        </el-form-item>
        <el-form-item
          label="分享朋友圈按钮"
          prop="activityButton.shareCircleOfFriends"
        >
          <uploadSingImg
            :imgUrl="ruleForm.activityButton.shareCircleOfFriends"
            accept="jpg,.jpeg,.png,.gif"
            :maxSize="5"
            :showDeleteIcon="true"
            @getImgUrl="getButtonImg($event, 'shareCircleOfFriends')"
          >
            <template v-slot:imgInfo>请您上传jpg, png, gif格式图片</template>
          </uploadSingImg>
        </el-form-item>
        <el-form-item
          label="分享微信好友按钮"
          prop="activityButton.shareWechatFriend"
        >
          <uploadSingImg
            :imgUrl="ruleForm.activityButton.shareWechatFriend"
            accept="jpg,.jpeg,.png,.gif"
            :maxSize="5"
            :showDeleteIcon="true"
            @getImgUrl="getButtonImg($event, 'shareWechatFriend')"
          >
            <template v-slot:imgInfo>请您上传jpg, png, gif格式图片</template>
          </uploadSingImg>
        </el-form-item>
        <el-form-item label="去提现按钮" prop="activityButton.toWithdraw">
          <uploadSingImg
            :imgUrl="ruleForm.activityButton.toWithdraw"
            accept="jpg,.jpeg,.png,.gif"
            :maxSize="5"
            :showDeleteIcon="true"
            @getImgUrl="getButtonImg($event, 'toWithdraw')"
          >
            <template v-slot:imgInfo>请您上传jpg, png, gif格式图片</template>
          </uploadSingImg>
        </el-form-item>
      </el-form-item>
    </el-form>
    <div class="handlerButton">
      <el-button type="success" @click="handelTab('generalConfig')">
        上一步
      </el-button>
      <el-button type="info" @click="cancel">取 消</el-button>
      <el-button type="success" @click="handelTab('userRules')">
        下一步
      </el-button>
    </div>
  </div>
</template>

<script>
import uploadSingImg from '@common/uploadSingImg'
export default {
  props: ['activityInfo'],
  components: { uploadSingImg },
  data() {
    return {
      ruleForm: {
        activityPoster: '', //活动海报
        sharePoster: '', //分享海报
        activityButton: {
          inviteEarnings: '', //邀请记录按钮
          returnsDetailed: '', //收益明细按钮
          shareCircleOfFriends: '', //分享朋友圈按钮
          shareWechatFriend: '', //分享微信好友按钮
          toWithdraw: '' //去提现按钮
        }
      },
      rules: {
        sharePoster: [
          { required: true, message: '请上传分享海报', trigger: 'change' }
        ],
        'activityButton.inviteEarnings': [
          { required: true, message: '请上传按钮图片', trigger: 'change' }
        ],
        'activityButton.returnsDetailed': [
          { required: true, message: '请上传按钮图片', trigger: 'change' }
        ],
        'activityButton.shareCircleOfFriends': [
          { required: true, message: '请上传按钮图片', trigger: 'change' }
        ],
        'activityButton.shareWechatFriend': [
          { required: true, message: '请上传按钮图片', trigger: 'change' }
        ],
        'activityButton.toWithdraw': [
          { required: true, message: '请上传按钮图片', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    activityInfo: {
      handler(val) {
        this.ruleForm = this.activityInfo
      },
      deep: true
    }
  },
  methods: {
    /* 海报图片 */
    getImgUrl(url, type) {
      this.ruleForm[type] = url
      this.$refs['ruleForm'].validateField(type)
    },
    /* 按钮图片 */
    getButtonImg(url, type) {
      this.ruleForm.activityButton[type] = url
      this.$refs['ruleForm'].validateField(`activityButton.${type}`)
    },
    /* 提交 */
    collectData() {
      let obj = Object.assign({}, this.ruleForm)
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) obj = { tab: 'customConfig' }
      })
      return obj
    },
    /* 下一步 */
    handelTab(name) {
      this.$emit('handleClick', { name })
    },
    /* 取消 */
    cancel() {
      this.$router.push({ name: 'wh:inviteHaveGift:activityList' })
    }
  }
}
</script>

<style lang="less" scoped>
.handlerButton {
  width: 300px;
  margin: 0 auto;
  .el-button {
    margin-right: 30px;
  }
}
</style>
